<template>
    <div class="common-layout">
      <el-container>
        <el-header><h5 class="mb-2">  <el-page-header :icon="null">
          <template #content>
            <div class="flex items-center">
              <el-avatar
                  :size="32"
                  class="mr-3"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <el-input
                  v-model="input"
                  style="width: 240px"
                  placeholder="Please input"
                  clearable
                  class="food-search"
              />
              <el-button type="warning" round  >搜索</el-button>
            </div>
          </template>
          <template #extra>
            <div class="flex items-center">

              <el-button type="danger" > 已点菜品</el-button>
            </div>
          </template>
        </el-page-header>
        </h5></el-header>
        <el-container>
          <el-aside width="200px"> <el-col :span="12">

            <el-menu
                active-text-color="#ffd04b"
                background-color="#a43145"
                class="el-menu-vertical-demo"
                default-active="2"
                text-color="#fff"
                @open="handleOpen"
                @close="handleClose"
            >
              <el-sub-menu index="1">
                <template #title>
                  <el-icon><location /></el-icon>
                  <span>菜单</span>
                </template>
                <el-menu-item index="1-1">主厨推荐</el-menu-item>
                <el-menu-item index="1-2">特色菜</el-menu-item>
                <el-menu-item index="1-3">招牌菜</el-menu-item>
                <el-menu-item index="1-4">凉菜</el-menu-item>
                <el-menu-item index="1-5"><router-link to="/orderfood/hotfood">热菜</router-link></el-menu-item>
                <el-menu-item index="1-7">肉类</el-menu-item>
                <el-menu-item index="1-8">海鲜肉类</el-menu-item>
                <el-menu-item index="1-9">主食</el-menu-item>
                <el-menu-item index="1-10">酒水</el-menu-item>
                <el-menu-item index="1-11">汤羹</el-menu-item>
              </el-sub-menu>

            </el-menu>
          </el-col></el-aside>
          <el-main><router-view></router-view></el-main>
        </el-container>
      </el-container>
    </div>


</template>

<script  setup>
import { ref } from 'vue'
const input = ref('')
</script>

<style scoped>
.el-menu-vertical-demo{
  width: 200px;
}
.food-search {
  margin-left: 350px;
}
</style>